<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双坐标系</title>
    <script src="./js/echarts.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
  </body>
  <script>
    const chart = echarts.init(document.getElementById("chart"));
    const option = {
      xAxis: {
        type: "category",
      },
      yAxis: [
        {
          min: 0,
          max: 70,
        },
        {
          splitLine: {
            // 隐藏右坐标系线段 或者 min max 设置一样可隐藏
            show: false, // 不显示分割线
          },
        },
      ],
      dataset: {
        source: [
          ["Product", "2012", "2013", "2014", "2015"],
          ["bar1", 41.1, 30.4, 65.1, 53.3],
          ["bar2", 86.5, 92.1, 85.7, 83.1],
        ],
      },
      series: [
        {
          type: "bar",
          seriesLayoutBy: "row", // 按行排列 - 数据源 以行的方式获取数据
          yAxisIndex: 0, // 对应Y轴第一坐标系
        },
        { type: "bar", seriesLayoutBy: "row", yAxisIndex: 1 },
      ],
    };
    chart.setOption(option);
  </script>
</html>
